<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h3>父组件</h3>
        <comp-a>asdasd</comp-a>
        <hr>
        <comp-a>
            <p>p标签</p>
        </comp-a>
        <hr>
        <comp-a>
            <a href="">百度</a>
        </comp-a>
        <hr>
        <comp-b>
            asdasdasd
            <template v-slot:a>
               <p>代码1{{ msg }}</p>
            </template>
            <template v-slot:b>
                <p>代码2</p>
            </template>
        </comp-b>
        <hr>
        <comp-c>
            <!-- default 默认分发slot的标签 -->
            <template #default="data">
                <p>{{ data.msg }}</p>
            </template>
            
            <!-- #c 是 v-slot:c 简写 -->
            <template #c="data">
                <p>获取MSG：{{ msg }}-{{ data.msg }}-{{ data }}</p>
            </template>
        </comp-c>
    </div>
    <template id="tempa">
        <div>
            <h3>组件A</h3>
            <!-- 定义组件分发标签 
                分发标签本身为一个占位标签
                为当前组件被调用时，组件标签中定义的内容提供位置支持
            -->
            <slot></slot>
            <h3>组件A</h3>
        </div>
    </template>
    <template id="tempb">
        <div>
            <!-- 
                具名分发 - 在组件分发技术上提供按照指定名称完成分发的相关操作
                没有定义名称的 slot 为默认分发插槽
                有定义名称的 slot 为具名分发插槽
            -->
            <slot></slot>
            <h3>组件B</h3>
            <slot name="a"></slot>
            <h3>组件B</h3>
            <slot name="b"></slot>
            <h3>组件B</h3>
            <slot></slot>
        </div>
    </template>
    <template id="tempc">
        <div>
            <!-- 
                插槽数据作用域
                1、默认情况下，被分发的标签属于定义时所属容器范围
                2、通过作用域插槽完成分发标签数据变量的取值范围
                    在slot标签上以 v-bind 进行数据绑定
                    在对应的插槽指令 v-slot上通过 = 获取一个自定义对象名称
            -->
            <slot :msg="msg"></slot>
            <h3>组件C</h3>
            <slot name="c" :msg="msg"></slot>
        </div>
    </template>
</body>
<script>
    /*
        组件分发技术：针对组件在进行定义时，完成将来页面结构的书写接口
            在定义组件模板时，指定固定位置，该位置的代码
            在当前组件被调用时才进行定义

    */
    new Vue({
        el: '#app',
        data:{
            name:"CompA",
            msg:"根组件"
        },
        components:{
            CompA:{
                template:"#tempa",
            },
            CompB:{
                template:"#tempb",
                data(){
                    return {
                        msg:"组件B"
                    }
                }
            },
            CompC:{
                template:"#tempc",
                data(){
                    return {
                        msg:"组件C的变量"
                    }
                }
            }
        }
    });
</script>

</html>